import React from 'react'
import { connect } from 'react-redux'
import Search from '../Search'
import NavMenu from './NavMenu'
import LoginOutMenu from './LoginOutMenu'
import LoginInMenu from './LoginInMenu'

class Nav extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        const { UserReducer } = this.props
        const { username, userImg, loginStatus } = UserReducer
        return (
            <nav>
                <NavMenu />
                {this.props.searchShow ? <Search /> : null}
                {loginStatus === 2 ? <LoginInMenu username={username} userImg={userImg} /> : null}
                {loginStatus === 1 ? <LoginOutMenu /> : null}

                <style jsx>{`
                   nav {
                        position: fixed;
                        width: 100%;
                        z-index: 500;
                        height: 55px;
                        display: flex;
                        align-items: center;
                        box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
                        background: #fff;
                   }
                `}</style>
            </nav>
        )
    }
}

const mapStateToProps = ({ UserReducer }) => ({ UserReducer })
export default connect(mapStateToProps, null)(Nav)
